<template>
  <div class="equipment">
    <p class="title">设备隐患趋势 >></p>
    <div id="line"></div>
  </div>
</template>
<script>
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');
  export default {
    name: 'equipment',
    data() {
      return {
        lineOption: {
          tooltip: {
            trigger: 'axis'
          },
          color:['#72BCFF','#F3CD2A','#808bc6'],
          legend: {
            x: 'right',
            data: [
              {
                name:'地锁',
                textStyle:{
                  fontSize:10,
                  color:'#0fcce4'
                },
                icon:'circle'
              },
              {
                name:'摄像头',
                textStyle:{
                  fontSize:10,
                  color:'#0fcce4'
                },
                icon:'circle'
              },
              {
                name:'充电桩',
                textStyle:{
                  fontSize:10,
                  color:'#0fcce4'
                },
                icon:'circle'
              },
            ],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            color:'red',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick:{ //y轴刻度线
              show:false
            },
            axisLine:{ //x轴
              show:false
            },
            axisLabel: {
              color:'#0fcce4',
            },
          },
          yAxis: {
            show: true,
            type: 'value',
            splitNumber:2,
            splitLine:{show: false},   //去除网格线
            nameTextStyle:{
              color:'#abb8ce'
            },
            axisLabel: {
              color:'#0fcce4',
            },
            axisTick:{ //y轴刻度线
              show:false
            },
            axisLine:{ //y轴
              show:false
            }
          },
          series: [
            {
              name: '地锁',
              type: 'line',
              data: [15, 20, 25, 20, 38, 23, 16],
              symbol: 'none',
              lineStyle:{
                color:'#72BCFF',
                width: '2'
              },
              areaStyle:{
                normal:{
                  //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(80,141,255,0.5)'
                  }, {
                    offset: .34,
                    color: 'rgba(56,155,255,0.2)'
                  },{
                    offset: 1,
                    color: 'rgba(38,197,254,0.00)'
                  }])
                }
              },
            },
            {
              name: '摄像头',
              type: 'line',
              data: [22, 18, 19, 39, 29, 36, 21],
              symbol: 'none',
              lineStyle:{
                color:'#F3CD2A',
                width: '2'
              },
              areaStyle:{
                normal:{
                   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(243,205,42,0.5)'
                    }, {
                        offset: .34,
                        color: 'rgba(243,205,42,0.2)'
                    },{
                        offset: 1,
                        color: 'rgba(243,205,42,0.00)'
                    }])
                }
              },
            },
            {
              name: '充电桩',
              type: 'line',
              data: [13, 36, 20, 30, 19, 33, 8],
              symbol: 'none',
              lineStyle:{
                color:'#808bc6',
                width: '2'
              },
              areaStyle:{
                normal:{
                   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(128,139,198,0.5)'
                    }, {
                        offset: .34,
                        color: 'rgba(128,139,198,0.2)'
                    },{
                        offset: 1,
                        color: 'rgba(128,139,198,0.00)'
                    }])
                }
              },
            },
          ]
        },
      }
    },
    mounted() {
      let myChartLine = this.$echarts.init(document.getElementById('line'));
      myChartLine.setOption(this.lineOption);
      window.addEventListener("resize",function(){
          myChartLine.resize();
        });
    },
    methods: {

    }
  }
</script>
<style scoped>
  .title {
    color:#f3f3f3;
    font-size: 1.6rem;
    position: absolute;
    left: 8%;
    top: 4%;
    letter-spacing: 2px;
  }
  #line {
    height: 80%;
    width: 88%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }


</style>
